<template>
  <div class="addQA">
    <!-- 增加提问 -->

    <el-dialog
      :append-to-body="false"
      width="600px"
      title="提问"
      :visible.sync="dialogTableVisible"
      @close="closeFn"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="您的问题" prop="desc">
          <el-input
            placeholder="请输入您的问题"
            type="textarea"
            v-model="ruleForm.desc"
          ></el-input>
        </el-form-item>
  
        
        <!--  action="https://www.acmemach.cn/prod-api/system/oss/upload" -->
        <el-form-item prop="pictures" label="图片">
          <el-upload
          action="https://www.acmemach.cn/uat-api/system/oss/upload"
            :headers="{
              Authorization: 'Bearer ' + token,
            }"
            :multiple="true"
            list-type="picture-card"
            :with-credentials="true"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-error="handleError"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-checkbox v-model="ruleForm.imgIsShow">图片设置为隐私</el-checkbox>
        </el-form-item>


        
        <!-- action="https://www.acmemach.cn/prod-api/system/oss/upload" -->

        <el-form-item label="视频">
          <el-upload
            class="upload-demo"
            action="https://www.acmemach.cn/uat-api/system/oss/upload"
            :headers="{
              Authorization: 'Bearer ' + token,
            }"
            :on-change="handleChange"
           
            :on-remove="handleRemove1"
            :limit="1"
            :before-upload="beforeAvatarUpload1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传mp4文件，且不超过20M
            </div>
          </el-upload>
          <el-checkbox v-model="ruleForm.videoIsShow">视频设置为隐私</el-checkbox>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button
          style="background: #25a2ab; border: none"
          type="primary"
          @click="submitForm('ruleForm')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { addissue, upload } from "../apis/index";
export default {
  props: ["curCate",'pid'],
  name: "addQA",
  components: {},
  data() {
    return {
      fileList2: [],
      token: "",
      dialogTableVisible: true,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,

      ruleForm: {
        desc: "",
        imgIsShow:false,
        videoIsShow:false,
//         imgIsShow  1 设为隐私 0 展示
// videoIsShow 1 设为隐私 0 展示
      },
      
      rules: {
        desc: [{ required: true, message: "请输入您的问题", trigger: "blur" }],
      },
    };
  },
  computed: {},
  mounted() {
    this.token = localStorage.getItem("jztoken");
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList2 = fileList?.map((r) => r.response.data.url);
    },
    handleRemove1(file, fileList) {
      // console.log(file, fileList, 88888888);
      this.fileList =[]
    },
    handlePictureCardPreview(file) {
      //预览
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleError(err, file, fileList) {
      //上传失败
      console.log(err);
    },
    beforeAvatarUpload(file) {
      //文件上传之前调用做一些拦截限制
      console.log(file);
      console.log(file,888888888822);
      const isJPG = file.type === "image/jpg";
      const isPng = file.type==="image/png";
      const isJpeg=file.type==="image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      if (!(isJPG ||isPng ||  isJpeg)) {
        this.$message({
          message: '只能上传后缀为jpg,jpeg,png格式的图片!',
          type: 'error'
        })
      }
      return (isJPG ||isPng ||  isJpeg)  && isLt2M;
    },
    beforeAvatarUpload1(file) {
      //文件上传之前调用做一些拦截限制
      console.log(file);

      const isMP4 = file.name.split('.')[1] === 'mp4'
    
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 20MB!");
      }
      if (!isMP4) {
        this.$message({
          message: '只能上传mp4视频',
          type: 'error'
        })
      }
      return isMP4 && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      //图片上传成功
      console.log(res, 4444);
      var files = res.data.url;
      this.fileList2.push(files);

      // this.dialogImageUrl = this.IMAGE_URL + "/image/" + res.data.file;
    },
    handleAvatarSuccess1(res, file){
      
      var files = res.data.url;

    
      this.fileList=[files];
      console.log( this.fileList,666666666666);
    },
    closeFn() {
      this.$emit("fnaddqa");
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {

      console.log(this.fileList?.[0]?.response?.data?.url);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addissue({

            imgIsShow:this.ruleForm.imgIsShow?1:0,
        videoIsShow:this.ruleForm.videoIsShow?1:0,
//         imgIsShow  1 设为隐私 0 展示
// videoIsShow 1 设为隐私 0 展示


            pid:this.pid,
            issue: this.ruleForm.desc,
            nameType: this.curCate,
            imgUrls: this.fileList2?.length?this.fileList2?.join(','):"",
            videoUrl: this.fileList?.length?this.fileList?.[0]?.response?.data?.url:''
          })
            .then((res) => {
              console.log(res.data);
              if (res.data.code == 200) {
                this.$emit("fnaddqa");
              } else {
              }
              console.log(res, 7777778888);
            })
            .catch(() => {});
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-button--primary {
  background: #25a2ab !important;
  border: 1px solid #25a2ab !important;
}
.addQA {
}
</style>